<template>
  <view class="login tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">登录</tn-navbar>
    <view class="login-title">
      <span>欢迎回来</span>
    </view>
    <view class="login-content">
      <view class="login-content-item tn-flex-row">
        <tn-icon class="icon" icon="phone"></tn-icon>
        <tn-input class="login-input" placeholder="请输入手机号" type="number" :maxlength="11" v-model="phone">
        </tn-input>
      </view>

      <view class="login-content-item tn-flex-row" v-if="loginType === 0">
        <tn-icon class="icon" icon="safe"></tn-icon>
        <tn-input class="login-input" placeholder="请输入密码" type="password" :maxlength="20" v-model="password">
        </tn-input>
      </view>

      <view class="login-content-item tn-flex-row" v-if="loginType === 1">
        <tn-icon class="icon" icon="phone-fill"></tn-icon>
        <tn-input class="login-input verif-code-input" placeholder="请输入验证码" type="number" :maxlength="6"
          v-model="verifCode">
        </tn-input>
        <tn-button class="send-code" v-show="sendSmsCodeBtn" @click="sendCode">获取验证码</tn-button>
        <tn-button class="send-code" v-show="!sendSmsCodeBtn">倒计时：{{ countdown }}</tn-button>
      </view>

      <view class="code-login" v-if="loginType === 0">
        <span class="code-login-text" @click="loginType = 1">验证码登录</span>
      </view>
      <view class="password-login" v-if="loginType === 1">
        <span class="password-login-text" @click="loginType = 0">密码登录</span>
      </view>
      <view class="login-content-item login-btn-view tn-bg-main tn-flex-row">
        <tn-button class="login-btn" type="primary" size="lg" @click="loginFunction">登录</tn-button>
      </view>

      <view class="user-agreement">
        <tn-checkbox-group v-model="userCheckbox">
          <tn-checkbox name="userGVRP"
            active-color="tn-bg-primary">我已阅读<span>《用户协议》</span>和<span>《隐私政策》</span></tn-checkbox>
        </tn-checkbox-group>
      </view>
      <view class="user-register">
        <span @click="toRegister()">手机注册</span>
        <span>忘记密码</span>
      </view>
    </view>
  </view>
  <tn-tips ref="defaultTips" :top="customNavbar.height + 'px'"></tn-tips>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import useSystemInfo from "@/tuniao-ui/libs/hooks/useSystemInfo";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnInput from "@/tuniao-ui/components/tn-input/src/Input.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnCheckbox from "@/tuniao-ui/components/tn-checkbox/src/Checkbox.vue";
import TnCheckboxGroup from "@/tuniao-ui/components/tn-checkbox/src/CheckboxGroup.vue";
import TnButton from "@/tuniao-ui/components/tn-button/src/Button.vue";

import TnTips from "@/tuniao-ui/components/tn-tips/src/Tips.vue";
import { navPage, navRedirecte } from "@/tuniao-ui/utils";
import { useUserStore } from "@/tuniao-ui/store/user";
import { ResultEnum } from "@/enums/httpEnum";
import { mobile, rangeLength } from "@/tuniao-ui/utils/testUtils";
import { sendSmsCode } from "@/api/user";

const phone = ref<number>();
const password = ref<string>("");
const toUrl = ref<string>(""); // 登录后跳转的页面

const loginType = ref(0); //0 密码登录  1 验证码登录
// 验证码登录使用
const verifCode = ref<number>();
const sendSmsCodeBtn = ref<boolean>(true);
const countdown = ref<number>(60);

const defaultTips = ref<InstanceType<typeof TnTips>>();
let userCheckbox = ref<string[]>([]);
const userStore = useUserStore();
const { customNavbar } = useSystemInfo();

function toRegister() {
  navPage("/pages/mine/register");
}

function sendCode() {
  console.log(phone.value, password.value);
  if (!phone.value) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入手机号",
    });
    return;
  }
  if (!mobile(phone.value?.toString())) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入正确的手机号",
    });
    return;
  }
  let params = { phone: phone.value, scene: "login" };
  sendSmsCode(params).then((res) => {
    const { code, message: msg } = res;
    if (code == ResultEnum.SUCCESS) {
      defaultTips.value?.show({
        type: "success",
        msg: "短信发送成功",
      });
      // 发送按钮不显示
      sendSmsCodeBtn.value = false;
      countdown.value = 60;
      let timer = setInterval(() => {
        // 定时器设置每秒递减
        countdown.value--; // 递减时间

        if (countdown.value <= 0) {
          sendSmsCodeBtn.value = true; // 60s时间结束还原v-show状态并清除定时器
          clearInterval(timer);
        }
      }, 1000);

    } else {
      defaultTips.value?.show({
        type: "danger",
        msg: msg,
      });
    }
  });
}

async function loginFunction() {
  console.log(phone.value?.toString(), password.value);
  if (!phone.value) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入手机号",
    });
    return;
  }
  if (!mobile(phone.value?.toString())) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请输入正确的手机号",
    });
    return;
  }

  if (loginType.value == 0) {
    if (!password.value) {
      defaultTips.value?.show({
        type: "warning",
        msg: "请输入密码",
      });
      return;
    }

    if (!rangeLength(password.value, [6, 20])) {
      defaultTips.value?.show({
        type: "warning",
        msg: "密码长度在6~20之内",
      });
      return;
    }
  } else {
    if (!verifCode.value) {
      defaultTips.value?.show({
        type: "warning",
        msg: "请输入验证码",
      });
      return;
    }
    if (!rangeLength(verifCode.value.toString(), [6, 6])) {
      defaultTips.value?.show({
        type: "warning",
        msg: "验证码为6位数字",
      });
      return;
    }
  }

  if (!userCheckbox.value[0]) {
    defaultTips.value?.show({
      type: "warning",
      msg: "请先阅读用户协议和隐私政策",
    });
    return;
  }
  const params = { userName: phone.value, password: password.value, loginType: loginType.value, code: verifCode.value };
  const { code, message: msg } = await userStore.login(params);
  if (code == ResultEnum.SUCCESS) {
    defaultTips.value?.show({
      type: "success",
      msg: "登录成功，即将跳回登录前页面",
    });
    setTimeout(function () {
      navRedirecte(toUrl.value);
      //location.href = "#" + toUrl.value;
      //window.location.replace("#" + toUrl.value);
    }, 2000);
  } else {
    defaultTips.value?.show({
      type: "danger",
      msg: msg,
    });
  }
  //
}

onLoad((options: any) => {
  toUrl.value = options.toUrl;
  if (!toUrl.value) {
    toUrl.value = "/";
  }
});
</script>

<style lang="scss" scoped>
uni-page-body,
#app {
  height: 100%;
}

.login {
  background-color: #fff;
  padding: 0 30rpx;
  height: 100%;

  .login-title {
    margin-top: 100rpx;
    font-size: 50rpx;
    font-weight: bold;
  }

  .login-content {
    margin-top: 150rpx;

    .login-content-item {
      margin-top: 60rpx;
      border: 1px solid #ccc;
      border-radius: 50rpx;
      padding: 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon {
        font-size: 45rpx;
        color: #888;
      }

      .login-input {
        width: 100%;
        height: 100rpx;
        font-size: 25rpx;
      }

      .send-code {
        width: 40%;
        height: 50rpx;
        line-height: 50rpx;
        font-size: 25rpx;
        text-align: center;
        border: none;
        border-radius: 50rpx;
      }
    }

    .code-login,
    .password-login {
      margin-top: 20rpx;
      text-align: end;
    }

    .login-btn-view {
      margin-top: 100rpx;
      border: none;

      .login-btn {
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        font-weight: bold;
        text-align: center;
        text-indent: 20rpx;
        letter-spacing: 20rpx;
      }
    }

    .user-agreement {
      margin-top: 30rpx;
      text-align: center;

      span {
        font-weight: bold;
      }
    }

    .user-register {
      margin-top: 60rpx;
      text-align: center;

      span {
        margin: 0 20rpx;
      }
    }
  }
}
</style>
